<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <title>Title</title>

    <!--=====================================================================-->
    <script>
        //手动实现轮播图
        //步骤:
        //1.决定位置,计算规划展示区域div的宽度和高度
        //2.设置每个轮播图的li,横排展示(float: left),消除列表样式(list-style: none)
        //3.本质是移动2个ul来实现轮播效果,复制1份ul,并通过定时器让ul不断向左移动
        //4.当ul向左移动的位置超过总宽度的一半时,视为左边第一部分已经全部显示,此时设置ul的left让位置归零
        //5.设置多余部分的div隐藏(overflow:hidden)
        
        //拓展1:向右移动
        //拓展2:鼠标移入暂停移动,移出继续移动
        //拓展3:向左向右移动的按钮

        window.onload = function () {
            let oDiv = document.getElementById('div1');
            let oUl = oDiv.getElementsByTagName('ul')[0];
            let aLi = oUl.getElementsByTagName('li');
            let timer = null;
            let speed = -15;  //-代表向左,正代表向右

            //定义ul移动的函数
            function move(speed) {
                //direction的正负数字可以调整左右移动,-左+右
                oUl.style.left = (oUl.offsetLeft + speed) +'px';

                //当第一部分全走完了的瞬间再让他回来
                if (-oUl.offsetLeft > oUl.offsetWidth/2) {
                    // console.log('offset left:',oUl.offsetLeft);      //查看log
                    // console.log('offset width:',oUl.offsetWidth);
                    oUl.style.left = '0';   //当ul走了一半时执行归零(因为是向左走,逐渐负数变大)
                }

                //还需要考虑向右移动的情况; 当ul左没有为0表示左边没有图片,设置第二段图片到div中
                if (oUl.offsetLeft > 0) {
                    oUl.style.left = -oUl.offsetWidth/2 + 'px'; //让ul左边移动到-1/2宽度的位置
                }
            }

            //创建鼠标移入事件,取消计时器
            oDiv.onmouseenter = function () {
                clearInterval(timer);
            };

            //移出事件,开启计时器
            oDiv.onmouseleave = function () {
                timer = setInterval(function () {   //定时器只有开和关,不会清零现在div的位置状态
                    move(speed)
                },30)
            };


            //绑定向左向右的按钮
            let left = document.getElementById('toLeft');
            let right = document.getElementById('toRight');

            left.onclick = function() {
                speed = -15;
                clearInterval(timer);
                timer = setInterval(function () {
                    move(speed)
                },30)
            };

            right.onclick = function() {
                speed = 15;
                clearInterval(timer);
                timer = setInterval(function () {
                    move(speed)
                },30)
            };
            //也可以再做些增加/减少speed的功能


            //设置ul本体
            oUl.innerHTML += oUl.innerHTML; //本质是通过2份ul不间断显示实现效果,因此这里复制一份ul自己;
            //此时ul的宽度够了以后会将第二排的li放到第一行中
            //因此,需要动态获取ul的宽度,(单个li宽度 + 60的margin-left宽度) * li的个数
            oUl.style.width = (aLi[0].offsetWidth + 60) * aLi.length + 'px';

            timer = setInterval(function () {
                move(speed);     //小技巧,在匿名函数中调用函数,让setInterval可以传参
            },30);   //取30可能是因为帧率
        };
    </script>

    <style>
        /*取消页边距,非正常写法*/
        * {
            margin: 0;
            padding: 0;
        }

        /*设置显示框div的宽度和高度,需要根据轮播图和间距来计算!*/
        #div1 {
            width: 3300px;
            height: 350px;
            margin: 100px auto;
            position: relative;
            overflow: hidden;       /*超出部分隐藏*/
        }

        /*移动时,是移动整个ul而非单个li,因此设置的是相对位置*/
        #div1 ul {
            position: absolute;
            left: 0;
            top: 0;
        }

        /*设置div1中的ul下的li*/
        #div1 ul li {
            float: left;        /*向左浮动*/
            list-style: none;   /*取消list的样式*/
            margin-left: 60px;
        }
    </style>
</head>

<body>

<div id="div1">
    <ul>
        <li><img src = "./img/黄.png" alt = "" width="600 px" height="350 px"></li>
        <li><img src = "./img/粉.png" alt = "" width="600 px" height="350 px"></li>
        <li><img src = "./img/青.png" alt = "" width="600 px" height="350 px"></li>
        <li><img src = "./img/灰.png" alt = "" width="600 px" height="350 px"></li>
        <li><img src = "./img/紫.png" alt = "" width="600 px" height="350 px"></li>
    </ul>

</div>
<div id="div2" style="text-align: center">
    <input type = "button" value="向左" id="toLeft">
    <input type = "button" value="向右" id="toRight">
</div>

</body>
</html>